<template>
  <view class="vh_100">
    <view :class="['vh100', { dark: theme == 'dark' }]">
      <view class="plr20">
        <view class="pt30">
          <view class="tc">
            <view class="tc_100">
              <image
                src="../../static/logo.png"
                mode="widthFix"
                class="wt80_100"
              ></image>
            </view>
          </view>
          <view class="mt20 plr10">
            <view class="flex alcenter tc_110">
              <view
                class="plr15 ptb10 ft16 posRelt"
                :class="{ blue2: loginActive == 0 }"
                @tap="loginActive = 0"
              >
                {{ $t('login').l_mobile }}
              </view>
              <view
                class="plr15 ptb10 ft16 posRelt"
                :class="{ blue2: loginActive == 1 }"
                @tap="loginActive = 1"
              >
                {{ $t('login').l_email }}
              </view>
            </view>

            <view class="mt20 plr10 ptb10 radius5">
              <view class="flex alcenter bdb_myblue mb10">
                <view
                  class="flex alcenter between mr10"
                  v-if="loginActive == 0"
                >
                  <picker
                    :value="index"
                    :range="array"
                    class="flex1"
                    @change="bindPickerChange"
                    range-key="label"
                  >
                    <view class="ft12">{{ array[index].area }} +{{ array[index].code }}</view>
                  </picker>

                  <span> 丨 666</span>
                </view>
                <view class="flex alcenter flex1">
                  <input
                    type="text"
                    v-model="user_string"
                    class="h40 lh40 flex1 input-uni"
                    v-if="loginActive == 1"
                    :placeholder="$t('login').p_email"
                  />
                  <input
                    type="digit"
                    v-model="user_string"
                    class="h40 lh40 flex1 input-uni"
                    v-else
                    :placeholder="$t('login').p_mobile"
                  />
                  <image
                    src="/static/image/ipo.png"
                    class="wt15 h15 ml10"
                  ></image>
                </view>
              </view>
              <view class="flex alcenter bdb_myblue mb10">
                <view class="flex alcenter flex1">
                  <input
                    type="password"
                    v-model="password"
                    @input="passwordInput1"
                    class="h40 lh40 flex1 input-uni"
                    :placeholder="$t('login').p_pwd"
                  />
                  <view
                    class="ft10 pt5 chengse"
                    v-if="verifyPwd1"
                    >{{ $t('login').p_len }}</view
                  >
                  <image
                    src="/static/image/mima.png"
                    class="wt15 h15 ml10"
                  ></image>
                </view>
              </view>
              <view class="flex alcenter bdb_myblue mb10">
                <view class="flex alcenter flex1">
                  <input
                    type="text"
                    v-model="invite_code"
                    class="h40 lh40 flex1 input-uni"
                    :placeholder="$t('login').p_inviteInput"
                  />
                  <image
                    src="/static/image/yaoqing.png"
                    class="wt15 h15 ml10"
                  ></image>
                </view>
              </view>
              <view class="flex alcenter bdb_myblue mb10">
                <view class="flex alcenter flex1">
                  <input
                    type="text"
                    v-if="loginActive == 0"
                    v-model="code"
                    class="h40 lh40 flex1 input-uni"
                    :placeholder="$t('login').r_pmobilecode"
                  />
                  <input
                    type="text"
                    v-else
                    v-model="code"
                    class="h40 lh40 flex1 input-uni"
                    :placeholder="$t('login').r_pemailcode"
                  />
                  <view
                    class="ml10 plr10 ptb5 radius4"
                    @tap="getCode"
                  >
                    <text v-if="!hasSend">{{ $t('login').r_send }}</text>
                    <text v-else>{{ second }}s</text>
                  </view>
                </view>
              </view>

              <view
                class="mt50 bgBlue radius5 ptb10 white ft14 tc mb10 lin"
                @tap="confirm"
                >{{ $t('login').register }}</view
              >

              <navigator
                url="/pages/login/login"
                class="mt20 bgBlue22 radius5 ptb10 white ft14 tc mb10 lin"
                >{{ $t('login').loginqdl }}</navigator
              >
            </view>
          </view>
        </view>
        <!-- <view class="fixed my_layer pos_l0b0 w100 ht100" v-if="isShowCodeLayer" @tap="isShowCodeLayer=false;">
				<view class="fixed pos_l0b0 bgHeader w100 pt20 pb10 plr10" @tap.stop>
					<view class="ptb14 tc blue2 ft14 bold" v-if="loginActive==0">{{$t('login').r_sms}}</view>
					<view class="ptb14 tc blue2 ft14 bold" v-else>{{$t('login').r_smsemail}}</view>
					<view class="flex bgwhite alcenter bdb_blue mb10 mt20" >
						<input type="text" v-if="loginActive==0" v-model="code" class="h40 lh40 flex1 input-uni" :placeholder="$t('login').r_pmobilecode">
						<input type="text" v-else v-model="code" class="h40 lh40 flex1 input-uni" :placeholder="$t('login').r_pemailcode">
						<view class="ml10 plr10 white bgBlue ptb5 radius4" @tap="getCode">
							<text v-if="!hasSend">{{$t('login').r_send}}</text>
							<text v-else>{{second}}s</text>
						</view>
					</view>
					<view class="mt30 bgBlue radius4 ptb10 white ft14 tc mb10" @tap.stop="confirm">{{$t('login').r_next}}</view>
				</view>
			</view> -->
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import country from '@/common/country.js';
import { commonPhoneCode, commonGetMsg, register } from '@/common/apiString.js';
import { myMixins } from '@/common/myMixins.js';
export default {
  mixins: [myMixins],
  data() {
    return {
      loginActive: 0,
      user_string: '',
      password: '',
      re_password: '',
      code: '',
      array: country,
      index: 0,
      area_code: '+86',
      hasSend: false,
      second: 90,
      isRemember: false,
      verifyPwd: false,
      verifyPwd1: false,
      sendcodeing: false,
      isShowCodeLayer: false,
      timeInterval: '',
      lang: '',
      phoneItem: {},
      nationality: 'China',
      invite_code: ''
    };
  },
  computed: {
    ...mapState({
      theme: state => state.theme
    })
  },
  mounted() {
    this.getPhone();
  },
  onLoad(e) {
    invitecode: '';
  },
  onLoad(e) {
    this.invitecode = e.invite_code;
    this.lang = uni.getStorageSync('lang');
    this.invite_code = e.invite_code;
    this.$utils.setTheme(this.theme);
    uni.setNavigationBarTitle({
      title: this.$t('login').register
    });
  },
  methods: {
    // 区号选择
    bindPickerChange(e) {
      this.index = e.target.value;
      this.phoneItem = this.array[this.index];
      this.area_code = this.phoneItem.code;
      this.nationality = this.phoneItem.area;
    },
    //获取手机前缀
    getPhone() {
      this.$utils.initData({ url: commonPhoneCode, type: 'POST' }, (res, msg) => {
        this.array = res;
        this.phoneItem = res[0];
      });
    },
    passwordInput1(e) {
      if (e.target.value.length < 6) {
        this.verifyPwd1 = true;
      } else {
        this.verifyPwd1 = false;
      }
    },
    passwordInput2(e) {
      if (e.target.value != this.password) {
        this.verifyPwd2 = true;
      } else {
        this.verifyPwd2 = false;
      }
    },
    // 获取验证码
    getCode() {
      if (this.timeInterval) return;
      if (this.loginActive == 0) {
        if (!this.user_string) {
          return this.$utils.showLayer(this.$t('login').p_taccount);
        }
        this.hasSend = true;
        this.timeInterval = setInterval(() => {
          if (this.second >= 1) {
            this.second--;
          } else {
            this.hasSend = false;
            clearInterval(this.timeInterval);
          }
        }, 2000);
        this.$utils.initData(
          {
            url: commonGetMsg,
            type: 'POST',
            data: {
              phone: this.user_string,
              code: this.area_code,
              type: this.phoneItem.type
            }
          },
          (res, msg) => {
            setTimeout(() => {
              this.$utils.showLayer(this.$t('bind').sendSuccess);
            }, 100);
          }
        );
      } else {
        if (!this.$utils.checkEmail(this.user_string)) {
          return this.$utils.showLayer(this.$t('login').p_temail);
        }
        this.hasSend = true;
        this.timeInterval = setInterval(() => {
          if (this.second >= 1) {
            this.second--;
          } else {
            this.hasSend = false;
            clearInterval(this.timeInterval);
          }
        }, 2000);
        this.$utils.initData(
          {
            url: commonGetMsg,
            type: 'POST',
            data: {
              email: this.user_string,
              code: this.area_code,
              type: this.phoneItem.type
            }
          },
          (res, msg) => {
            setTimeout(() => {
              this.$utils.showLayer(this.$t('bind').sendSuccess);
            }, 100);
          }
        );
      }
    },
    // 下一步
    goNext() {
      if (this.loginActive == 1) {
        // 邮箱登录
        if (!this.$utils.checkEmail(this.user_string)) {
          return this.$utils.showLayer(this.$t('login').p_temail);
        }
      } else {
        if (!this.user_string) {
          return this.$utils.showLayer(this.$t('login').p_taccount);
        }
      }
      this.isShowCodeLayer = true;
      this.hasSend = false;
      this.timeInterval = '';
      this.code = '';
    },
    // 密码框输入判断提示
    passwordInput(e) {
      this.hasSend = false;
      if (e.target.value.length < 6 || e.target.value.length > 16) {
        this.verifyPwd = true;
      } else {
        this.verifyPwd = false;
      }
    },
    // 确定
    confirm() {
      if (!this.code) {
        return this.$utils.showLayer(this.$t('login').p_vcode);
      }
      if (this.loginActive == 1) {
        // 邮箱登录
        if (!this.$utils.checkEmail(this.user_string)) {
          return this.$utils.showLayer(this.$t('login').p_temail);
        }
      } else {
        if (!this.user_string) {
          return this.$utils.showLayer(this.$t('login').p_taccount);
        }
      }
      if (!this.password) {
        return this.$utils.showLayer(this.$t('login').p_pwd);
      }
      if (!this.invite_code) {
        return this.$utils.showLayer(this.$t('login').p_inviteInput);
      }

      var data = {
        account: this.user_string,
        password: this.password,
        inviteCode: this.invite_code,
        msg: this.code
      };

      var url = register;
      if (this.loginActive == 0) {
        // 手机注册
        data.code = this.phoneItem.code;
      }

      this.$utils.initData({ url, data, type: 'POST' }, (res, msg) => {
        // this.$utils.showLayer(msg);
        //this.$utils.showLayer("注册成功");
        this.isShowCodeLayer = false;
        //console.log(this.invite_code,'=====')
        // var invitecode='';
        // if(this.invite_code){
        // 	invitecode=this.invite_code;
        // }else{
        // 	invitecode='';
        // }
        setTimeout(() => {
          uni.navigateTo({
            url: `/pages/login/login`
          });
        }, 1500);
      });
    }
  }
};
</script>

<style>
.vh_100 {
  padding: 0vw 0 0 0;
  background: url(../../static/image/loginbg.png) no-repeat;
  background-size: 100%;
}
.tc_100 {
  background: #6539ee4d;
  border-radius: 50%;
  width: 25vw;
  height: 25vw;
  overflow: hidden;
  border: 1vw solid #ffffff00;
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

.wt80_100 {
  width: 24vw;
}

.tc_110 {
  padding-left: 22vw;
  padding-right: 20vw;
  align-items: center;
}
.ft16 {
  font-size: 4vw;
}
.plr10 {
  padding-left: 2vw;
  padding-right: 2vw;
}
.mt20 {
  margin-top: 6vw;
}
.plr15 {
  padding-left: 4vw;
  padding-right: 4vw;
  width: 50vw;
}

.pt30 {
  padding-top: 25vw;
}
.bgBlue {
  background: #2196f3;
}
.ft12 {
  font-size: 4vw;
}
* {
  font-size: 4vw;
}
.uni-picker-container .uni-picker-action {
  font-size: 4vw;
}
</style>
